<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>像素小鸟 - 减压游戏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
      }

      body {
        font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(to bottom, #70c5ce 0%, #8ed6ff 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        position: fixed;
      }

      #gameContainer {
        position: relative;
        width: 100%;
        max-width: 400px;
        height: 100%;
        max-height: 600px;
        overflow: hidden;
      }

      canvas {
        display: block;
        background-color: #70c5ce;
        width: 100%;
        height: 100%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
      }

      .ui-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
      }

      .ui-content {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        max-width: 80%;
      }

      .ui-title {
        font-size: 24px;
        margin-bottom: 10px;
        color: #333;
      }

      .ui-score {
        font-size: 36px;
        font-weight: bold;
        color: #ff9900;
        margin: 10px 0;
      }

      .ui-button {
        background-color: #70c5ce;
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 50px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
      }

      .ui-button:hover,
      .ui-button:active {
        transform: scale(1.05);
        background-color: #5aafb8;
      }

      .score-display {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 24px;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        z-index: 5;
      }

      .back-button {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(255, 255, 255, 0.7);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 5;
      }

      .instruction {
        font-size: 16px;
        color: #555;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div id="gameContainer">
      <canvas id="gameCanvas"></canvas>
      <div id="scoreDisplay" class="score-display">分数: 0</div>
      <button id="backButton" class="back-button">←</button>

      <!-- 开始游戏UI -->
      <div id="startScreen" class="ui-overlay">
        <div class="ui-content">
          <h1 class="ui-title">像素小鸟</h1>
          <p class="instruction">点击屏幕让小鸟飞翔，躲避所有管道！</p>
          <button id="startButton" class="ui-button">开始游戏</button>
        </div>
      </div>

      <!-- 游戏结束UI -->
      <div id="gameOverScreen" class="ui-overlay" style="display: none">
        <div class="ui-content">
          <h1 class="ui-title">游戏结束</h1>
          <p>你的得分</p>
          <div id="finalScore" class="ui-score">0</div>
          <button id="restartButton" class="ui-button">再试一次</button>
        </div>
      </div>
    </div>

    <script>
      // 获取DOM元素
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const scoreDisplay = document.getElementById("scoreDisplay");
      const finalScoreDisplay = document.getElementById("finalScore");
      const startScreen = document.getElementById("startScreen");
      const gameOverScreen = document.getElementById("gameOverScreen");
      const startButton = document.getElementById("startButton");
      const restartButton = document.getElementById("restartButton");
      const backButton = document.getElementById("backButton");

      // 设置游戏参数
      let gameWidth, gameHeight;
      let gameRunning = false;

      // 调整Canvas大小为容器大小
      function resizeCanvas() {
        const container = document.getElementById("gameContainer");
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
        gameWidth = canvas.width;
        gameHeight = canvas.height;

        // 如果游戏正在运行，需要重新定位鸟和管道
        if (gameRunning) {
          bird.x = gameWidth * 0.2;
          bird.y = gameHeight / 2;
        }
      }

      // 监听窗口大小变化
      window.addEventListener("resize", resizeCanvas);

      // 初始化Canvas尺寸
      resizeCanvas();

      // 游戏对象
      let bird, pipes, score, animationId;

      // 初始化游戏
      function initGame() {
        bird = {
          x: gameWidth * 0.2,
          y: gameHeight / 2,
          width: gameWidth * 0.06,
          height: gameWidth * 0.06,
          gravity: gameHeight * 0.0003,
          lift: -gameHeight * 0.007,
          velocity: 0,
          rotation: 0,
        };

        pipes = [];
        score = 0;
        scoreDisplay.textContent = "分数: " + score;

        // 重置游戏速度和难度
        pipeSpeed = gameWidth * 0.004;
        pipeSpawnRate = 100;
        minPipeGap = bird.height * 4;
        maxPipeGap = bird.height * 5.5;
      }

      // 绘制小鸟
      function drawBird() {
        ctx.save();
        ctx.translate(bird.x + bird.width / 2, bird.y + bird.height / 2);
        ctx.rotate(bird.rotation);

        // 绘制鸟身
        ctx.fillStyle = "#FFD700";
        ctx.fillRect(
          -bird.width / 2,
          -bird.height / 2,
          bird.width,
          bird.height
        );

        // 绘制鸟眼
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(
          bird.width / 4,
          -bird.height / 6,
          bird.width / 10,
          0,
          Math.PI * 2
        );
        ctx.fill();

        // 绘制鸟嘴
        ctx.fillStyle = "#FF6347";
        ctx.fillRect(bird.width / 3, 0, bird.width / 2, bird.height / 5);

        ctx.restore();
      }

      // 创建新管道
      function createPipe() {
        let pipeGap =
          Math.floor(Math.random() * (maxPipeGap - minPipeGap + 1)) +
          minPipeGap;
        let topHeight =
          Math.floor(Math.random() * (gameHeight * 0.5)) + gameHeight * 0.1;

        pipes.push({
          x: gameWidth,
          width: gameWidth * 0.1,
          topHeight: topHeight,
          bottomY: topHeight + pipeGap,
          passed: false,
        });
      }

      // 绘制管道
      function drawPipes() {
        ctx.fillStyle = "#2ecc71";

        pipes.forEach((pipe) => {
          // 上管道
          ctx.fillRect(pipe.x, 0, pipe.width, pipe.topHeight);

          // 上管道的边缘
          ctx.fillStyle = "#27ae60";
          ctx.fillRect(
            pipe.x - gameWidth * 0.01,
            pipe.topHeight - gameHeight * 0.02,
            pipe.width + gameWidth * 0.02,
            gameHeight * 0.02
          );
          ctx.fillStyle = "#2ecc71";

          // 下管道
          ctx.fillRect(
            pipe.x,
            pipe.bottomY,
            pipe.width,
            gameHeight - pipe.bottomY
          );

          // 下管道的边缘
          ctx.fillStyle = "#27ae60";
          ctx.fillRect(
            pipe.x - gameWidth * 0.01,
            pipe.bottomY,
            pipe.width + gameWidth * 0.02,
            gameHeight * 0.02
          );
          ctx.fillStyle = "#2ecc71";
        });
      }

      // 更新管道位置
      function updatePipes() {
        pipes.forEach((pipe) => {
          pipe.x -= pipeSpeed;

          // 如果小鸟通过管道
          if (pipe.x + pipe.width < bird.x && !pipe.passed) {
            score++;
            scoreDisplay.textContent = "分数: " + score;
            pipe.passed = true;

            // 每得5分增加难度
            if (score % 5 === 0) {
              pipeSpeed *= 1.1;
              pipeSpawnRate = Math.max(50, pipeSpawnRate - 5);
            }
          }
        });

        // 移除超出屏幕的管道
        if (pipes.length && pipes[0].x < -pipes[0].width) {
          pipes.shift();
        }

        // 按照规定的速率生成管道
        if (frames % pipeSpawnRate === 0) {
          createPipe();
        }
      }

      // 碰撞检测
      function checkCollision() {
        // 天花板和地面碰撞
        if (bird.y <= 0 || bird.y + bird.height >= gameHeight) {
          return true;
        }

        // 管道碰撞
        for (let i = 0; i < pipes.length; i++) {
          let pipe = pipes[i];
          if (
            bird.x < pipe.x + pipe.width &&
            bird.x + bird.width > pipe.x &&
            (bird.y < pipe.topHeight || bird.y + bird.height > pipe.bottomY)
          ) {
            return true;
          }
        }

        return false;
      }

      // 更新鸟的状态
      function updateBird() {
        bird.velocity += bird.gravity;
        bird.y += bird.velocity;

        // 根据速度更新旋转角度
        bird.rotation = Math.min(
          Math.PI / 4,
          Math.max(-Math.PI / 4, bird.velocity * 0.1)
        );
      }

      // 绘制背景
      function drawBackground() {
        // 天空
        ctx.fillStyle = "#70c5ce";
        ctx.fillRect(0, 0, gameWidth, gameHeight);

        // 云朵
        ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
        const cloudPositions = [
          { x: gameWidth * 0.1, y: gameHeight * 0.15, size: gameWidth * 0.15 },
          { x: gameWidth * 0.5, y: gameHeight * 0.1, size: gameWidth * 0.2 },
          { x: gameWidth * 0.8, y: gameHeight * 0.2, size: gameWidth * 0.12 },
        ];

        cloudPositions.forEach((cloud) => {
          ctx.beginPath();
          ctx.arc(cloud.x, cloud.y, cloud.size / 2, 0, Math.PI * 2);
          ctx.arc(
            cloud.x + cloud.size * 0.4,
            cloud.y - cloud.size * 0.1,
            cloud.size / 2.5,
            0,
            Math.PI * 2
          );
          ctx.arc(
            cloud.x + cloud.size * 0.7,
            cloud.y,
            cloud.size / 2.2,
            0,
            Math.PI * 2
          );
          ctx.fill();
        });
      }

      // 绘制地面
      function drawGround() {
        ctx.fillStyle = "#dec387";
        ctx.fillRect(
          0,
          gameHeight - gameHeight * 0.1,
          gameWidth,
          gameHeight * 0.1
        );

        // 地面纹理
        ctx.fillStyle = "#cba559";
        for (let i = 0; i < 10; i++) {
          ctx.fillRect(
            gameWidth * (i / 10),
            gameHeight - gameHeight * 0.1,
            gameWidth * 0.01,
            gameHeight * 0.02
          );
        }
      }

      let frames = 0;
      let pipeSpeed, pipeSpawnRate, minPipeGap, maxPipeGap;

      // 游戏循环
      function gameLoop() {
        ctx.clearRect(0, 0, gameWidth, gameHeight);

        drawBackground();
        drawPipes();
        drawBird();
        drawGround();

        updateBird();
        updatePipes();
        frames++;

        if (checkCollision()) {
          gameOver();
        } else {
          animationId = requestAnimationFrame(gameLoop);
        }
      }

      // 游戏结束处理
      function gameOver() {
        cancelAnimationFrame(animationId);
        gameRunning = false;
        finalScoreDisplay.textContent = score;
        gameOverScreen.style.display = "flex";
      }

      // 开始游戏
      function startGame() {
        startScreen.style.display = "none";
        gameOverScreen.style.display = "none";
        initGame();
        gameRunning = true;
        gameLoop();
      }

      // 绑定触摸事件
      canvas.addEventListener("click", function () {
        if (gameRunning) {
          bird.velocity = bird.lift;
        }
      });

      // 绑定触摸事件，用于移动设备
      canvas.addEventListener(
        "touchstart",
        function (e) {
          e.preventDefault();
          if (gameRunning) {
            bird.velocity = bird.lift;
          }
        },
        { passive: false }
      );

      // 点击开始按钮
      startButton.addEventListener("click", startGame);

      // 点击重新开始按钮
      restartButton.addEventListener("click", startGame);

      // 返回按钮点击事件
      backButton.addEventListener("click", function () {
        window.location.href = "index.html";
      });

      // 键盘控制（空格键）
      document.addEventListener("keydown", function (e) {
        if (e.code === "Space" && gameRunning) {
          bird.velocity = bird.lift;
        }
      });
    </script>
  </body>
</html>
